<template>
  <div class="subtitle-sidebar">
    <a-scrollbar type="track" style="height: calc(100vh - 170px); overflow-y: auto; overflow-x: hidden">
      <a-menu
        :mode="menuMode"
        :theme="theme"
        v-model:selectedKeys="defaultPath"
        v-model:collapsed="appStore.isCollapse"
        auto-open
        @menu-item-click="onMenuClick"
        v-bind="menuProps"
      >
        <template v-for="item of menuOptions" :key="item.key">
          <template v-if="!item.children">
            <a-menu-item :key="item.key">
              <template #icon v-if="item.icon">
                <svg-icon style="font-size: 16px; margin-top: -2px" :name="item.icon" />
              </template>
              {{ item.label }}
            </a-menu-item>
          </template>
          <template v-else>
            <SubMenu :key="item.key" :menu-info="item" />
          </template>
        </template>
      </a-menu>
    </a-scrollbar>
  </div>
</template>

<script lang="ts">
  import { computed, defineComponent, nextTick, onMounted, PropType, ref, shallowReactive, watch, watchEffect } from 'vue'
  import { RouteRecordRaw, useRoute, useRouter } from 'vue-router'
  import { isExternal } from '@/utils'
  import useAppConfigStore from '@/store/modules/app-config'
  import { LayoutMode, SideTheme, ThemeMode } from '@/store/types'
  import { transfromMenu } from '@/store/help'
  import useVisitedRouteStore from '@/store/modules/visited-routes'

  export default defineComponent({
    name: 'ScrollerMenu',
    props: {
      routes: {
        type: Array as PropType<Array<RouteRecordRaw>>,
        require: true,
        default: () => [],
      },
      mode: {
        type: String as PropType<'vertical' | 'pop' | 'horizontal' | 'popButton' | undefined>,
        default: 'vertical',
      },
      menuProps: {
        type: Object,
        default: () => ({}),
      },
    },
    emits: ['top-item-click'],
    setup(props, { emit }) {
      const visitedRouteStore = useVisitedRouteStore()
      const appStore = useAppConfigStore()
      const menuOptions = shallowReactive<any[]>([])
      const defaultPath = ref<string[]>([])
      const defaultExpandKeys = ref<string[]>([])
      const menuMode = computed(() => props.mode)
      const currentRoute = useRoute()
      const router = useRouter()
      defaultPath.value.push(currentRoute.fullPath)
      const tag = ref(menuMode.value === 'vertical' ? 'Scrollbar' : 'div')
      const theme = computed(() => {
        if (appStore.theme === ThemeMode.DARK) {
          return 'dark'
        }
        if (appStore.layoutMode === LayoutMode.TTB) {
          return 'light'
        }
        return appStore.sideTheme === SideTheme.IMAGE ? 'dark' : appStore.sideTheme === SideTheme.WHITE ? 'light' : 'dark'
      })

      function handleMenu(routes?: Array<RouteRecordRaw>) {
        menuOptions.length = 0
        const tempMenus = transfromMenu(routes || [])
        menuOptions.push(...tempMenus)
      }

      function onMenuClick(key: string) {
        if (menuMode.value === 'horizontal') {
          emit('top-item-click', key)
          return
        }
        if (isExternal(key)) {
          window.open(key)
        } else {
          router.push(key)
          if (appStore.deviceType === 'mobile') {
            appStore.toggleCollapse(true)
          }
        }
      }
      watch(
        () => currentRoute.fullPath,
        (fullPath) => {
          nextTick(() => {
            const visitedRoute = visitedRouteStore.getVisitedRoutes.find((it: any) => it.fullPath === fullPath)
            if (visitedRoute) {
              const { originator } = visitedRoute?.meta
              defaultPath.value.length = 0
              if (originator) {
                defaultPath.value.push(originator.path)
                return
              }
              defaultPath.value.push(currentRoute.path)
            }
          })
        },
        {
          immediate: true,
        }
      )
      watch(
        () => props.mode,
        (newVal) => {
          newVal === 'vertical' ? 'Scrollbar' : 'div'
        }
      )
      watchEffect(() => {
        handleMenu(props.routes)
      })
      onMounted(() => {
        nextTick(() => {
          const items = document.querySelectorAll('.arco-trigger-popup.arco-trigger-position-bl.arco-menu-pop-trigger')
          items.forEach((it) => {
            it.setAttribute('style', 'width: 150px')
          })
        })
      })
      return {
        appStore,
        tag,
        theme,
        menuMode,
        defaultPath,
        defaultExpandKeys,
        menuOptions,
        onMenuClick,
      }
    },
  })
</script>

<style lang="less" scoped>
  .subtitle-sidebar {
    padding: 12px 0;
    border-radius: @borderRadius;
    background: #fff;
    height: calc(100vh - 160px);
  }

  :deep {
    .arco-menu-icon {
      margin-right: 8px !important;
    }
    .arco-menu-collapsed {
      margin: 0 auto;
    }
    .arco-menu-light .arco-menu-item.arco-menu-selected {
      background: #f2f3f5;
      font-weight: 700;
    }
    .arco-menu-light .arco-menu-inline-header.arco-menu-selected {
      color: #165dff;
    }
    .arco-menu-light .arco-menu-item.arco-menu-selected,
    .arco-menu-light .arco-menu-group-title.arco-menu-selected,
    .arco-menu-light .arco-menu-pop-header.arco-menu-selected,
    .arco-menu-light .arco-menu-inline-header.arco-menu-selected {
      color: #165dff;
      & .arco-menu-icon {
        color: #165dff !important;
      }
    }
    .arco-menu-light .arco-menu-inline-header.arco-menu-selected .arco-icon,
    .arco-menu-light .arco-menu-inline-header.arco-menu-selected .arco-menu-icon {
      color: #165dff;
    }
  }

  .scrollbar {
    overflow-y: auto;
    &::-webkit-scrollbar {
      width: 0;
    }
  }
</style>
